{% extends 'ux_packages/package.html.twig' %}

{% block package_header %}
    {% component PackageHeader with {
        package: 'typed',
        eyebrowText: 'A Library that Types'
    } %}
        {% block title_header %}
            Typed brings text <em>to life</em>
        {% endblock %}

        {% block sub_content %}
            Spice up some text by typing, backspacing and re-typing with <a class="font-white text-underline" href="https://github.com/mattboldt/typed.js/" rel="noopener nofollow noreferrer">Typed.js</a>.
        {% endblock %}
    {% endcomponent %}
{% endblock %}

{% block code_block_left %}
    <twig:CodeBlock
        filename="templates/ux_packages/typed.html.twig"
        height="300px"
        targetTwigBlock="code_block_right"
    />
{% endblock %}

{% block code_block_right %}
    <div class="p-5" style="font-size: 1.3em;">
        {% set strings = [
            'I ❤️ Symfony UX!',
            'Symfony UX Typed loves to type',
            'Symfony UX Typed and backspace',
            'Control the speed',
            'Control the cursor',
            'Control your destiny!!!',
            'Control your destiny... sort of',
        ] %}
        <span
            data-controller="symfony--ux-typed"
            data-symfony--ux-typed-loop-value="true"
            data-symfony--ux-typed-show-cursor-value="true"
            data-symfony--ux-typed-cursor-char-value="✨"
            data-symfony--ux-typed-strings-value="{{ strings|json_encode|e('html_attr') }}"
        ></span>
    </div>
{% endblock %}
